<template>
    <el-header>
        <h3>待办事项</h3>
        <el-table :data="todoList" style="width: 100%">
            <el-table-column prop="type" label="类型" width="100"></el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column prop="time" label="时间" width="120"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button 
                        v-if="scope.row.status === '待审核'" 
                        type="primary" 
                        link 
                        @click="handleAudit(scope.row)"
                    >
                        审核
                    </el-button>
                    <el-button 
                        v-if="scope.row.status === '已审核'" 
                        type="warning" 
                        link 
                        @click="handleReverseAudit(scope.row)"
                    >
                        反审核
                    </el-button>
                    <el-button 
                        v-if="scope.row.status === '已处理'" 
                        type="info" 
                        link 
                        disabled
                    >
                        已处理
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
            style="float: right; margin-top: 16px;" 
            background 
            layout="prev, pager, next, jumper"
            :total="pageInfo.total" 
            :page-size="pageInfo.pageSize" 
            :current-page="pageInfo.pageNum"
            @current-change="changePage" 
            v-model:current-page="pageInfo.pageNum" 
        />

        <!-- 审核对话框 -->
        <el-dialog
            v-model="auditDialog.visible"
            :title="`审核 - ${auditDialog.currentItem?.type}`"
            width="500px"
        >
            <el-form :model="auditForm" label-width="100px">
                <el-form-item label="审核结果">
                    <el-radio-group v-model="auditForm.result">
                        <el-radio label="通过">审核通过</el-radio>
                        <el-radio label="不通过">审核不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审核原因">
                    <el-input
                        v-model="auditForm.reason"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入审核原因"
                        maxlength="200"
                        show-word-limit
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="auditDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="confirmAudit">确定</el-button>
            </template>
        </el-dialog>

        <!-- 反审核对话框 -->
        <el-dialog
            v-model="reverseAuditDialog.visible"
            :title="`反审核 - ${reverseAuditDialog.currentItem?.type}`"
            width="500px"
        >
            <el-form :model="reverseAuditForm" label-width="100px">
                <el-form-item label="反审核原因">
                    <el-input
                        v-model="reverseAuditForm.reason"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入反审核原因"
                        maxlength="200"
                        show-word-limit
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="reverseAuditDialog.visible = false">取消</el-button>
                <el-button type="warning" @click="confirmReverseAudit">确定反审核</el-button>
            </template>
        </el-dialog>
    </el-header>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const todoList = ref([
    { 
        id: 1, 
        type: '付款', 
        content: '审核2023-11月供应商付款单', 
        time: '2023-11-15',
        status: '待审核'
    },
    { 
        id: 2, 
        type: '收款', 
        content: '跟进ABC公司到期应收账款', 
        time: '2023-11-16',
        status: '已审核'
    },
    { 
        id: 3, 
        type: '采购', 
        content: '审批新办公设备采购申请', 
        time: '2023-11-14',
        status: '待审核'
    },
    { 
        id: 4, 
        type: '库存', 
        content: '处理成品库库存盘点差异', 
        time: '2023-11-13',
        status: '已处理'
    }
]);

const pageInfo = reactive({
    total: 0,
    pageSize: 8,
    pageNum: 1
});

// 审核相关状态
const auditDialog = reactive({
    visible: false,
    currentItem: null
});

const auditForm = reactive({
    result: '通过',
    reason: ''
});

// 反审核相关状态
const reverseAuditDialog = reactive({
    visible: false,
    currentItem: null
});

const reverseAuditForm = reactive({
    reason: ''
});

// 状态标签类型
const getStatusType = (status) => {
    const typeMap = {
        '待审核': 'warning',
        '已审核': 'success',
        '已处理': 'info',
        '审核不通过': 'danger'
    };
    return typeMap[status] || 'info';
};

// 审核操作
const handleAudit = (item) => {
    auditDialog.currentItem = item;
    auditForm.result = '通过';
    auditForm.reason = '';
    auditDialog.visible = true;
};

// 反审核操作
const handleReverseAudit = (item) => {
    reverseAuditDialog.currentItem = item;
    reverseAuditForm.reason = '';
    reverseAuditDialog.visible = true;
};

// 确认审核
const confirmAudit = async () => {
    if (!auditForm.reason.trim()) {
        ElMessage.warning('请输入审核原因');
        return;
    }

    try {
        await ElMessageBox.confirm(
            `确定要${auditForm.result === '通过' ? '通过' : '不通过'}审核吗？`,
            '确认审核',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        // 模拟审核操作
        const item = auditDialog.currentItem;
        const index = todoList.value.findIndex(i => i.id === item.id);
        if (index !== -1) {
            if (auditForm.result === '通过') {
                todoList.value[index].status = '已审核';
                ElMessage.success('审核通过');
            } else {
                todoList.value[index].status = '审核不通过';
                ElMessage.warning('审核不通过');
            }
        }

        auditDialog.visible = false;
        ElMessage.success(`审核${auditForm.result}，原因：${auditForm.reason}`);
    } catch (error) {
        // 用户取消操作
        console.log('用户取消审核');
    }
};

// 确认反审核
const confirmReverseAudit = async () => {
    if (!reverseAuditForm.reason.trim()) {
        ElMessage.warning('请输入反审核原因');
        return;
    }

    try {
        await ElMessageBox.confirm(
            '确定要执行反审核操作吗？',
            '确认反审核',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        // 模拟反审核操作
        const item = reverseAuditDialog.currentItem;
        const index = todoList.value.findIndex(i => i.id === item.id);
        if (index !== -1) {
            todoList.value[index].status = '待审核';
            ElMessage.success('反审核成功');
        }

        reverseAuditDialog.visible = false;
        ElMessage.success(`反审核成功，原因：${reverseAuditForm.reason}`);
    } catch (error) {
        // 用户取消操作
        console.log('用户取消反审核');
    }
};

const changePage = (page) => {
    pageInfo.pageNum = page;
};
</script>

<style scoped>
.el-header {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h3 {
    margin: 0 0 20px 0;
    color: #303133;
}
</style>